<template>
  <div class="mod-config">
    <table-view ref="view"
                :searchAttrs="searchAttrs"
                :primaryKey="primaryKey"
                :listApiName="listApiName"
                :deleteApiName="deleteApiName"
                :saveAuthName="saveAuthName"
                :deleteAuthName="deleteAuthName"
                :showAttrs="showAttrs"
                :optionWidth="250"
    >
      <template v-slot:header>
        <el-button size="small" type="warning" @click="openChartDialogHandler('all')">图表</el-button>
      </template>
      <template v-slot:foot="{scope}">
        <el-tooltip class="item" effect="dark" content="合格率" placement="bottom" :hide-after="1800" :open-delay="800">
          <el-button size="small" type="warning" @click="openChartDialogHandler('one',{userInfoId: R.path(['row', primaryKey], scope)})">
            合格率
          </el-button>
        </el-tooltip>
      </template>
    </table-view>
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    <normal-chart-dialog ref="charDialog"
                         :chartSearchObj="chartSearchObj"
                         :commitChartSearch="commitChartSearch"
    >
      <template v-slot:chart="{chart}">
        <chart-all v-if="R.equals('all', charType)" ref="chart"></chart-all>
        <chart-one v-if="R.equals('one', charType)" ref="chart"></chart-one>
      </template>
    </normal-chart-dialog>
  </div>
</template>

<script>
import AddOrUpdate from './userinfo-add-or-update'
import tableView from '@/components/tableView'
import basicMixins from '@/utils/commonViewMixins'
import chartAll from '@/views/charts/user/userAllSuccessRateLineChart'
import chartOne from '@/views/charts/user/userSuccessRateChart'

export default {
  mixins: [basicMixins],
  data() {
    return {
      chartSearchObj: {
        dataForm: {
          dateTimeRange: []
        },
        config: {
          dateTimeRange: {
            type: 'date',
            clearable: true,
            dateType: 'daterange',
            label: '时间范围'
          }
        }
      },
      charType: 'one',
      searchAttrs: {},
      primaryKey: 'id',
      listApiName: 'userApi/listUserInfo',
      deleteApiName: 'userApi/deleteUserInfo',
      saveAuthName: 'user:userinfo:save',
      deleteAuthName: 'user:userinfo:delete',
      showAttrs: {
        userName: {label: '用户名'},
        userNo: {label: '用工编号'},
        mobile: {label: '手机号'},
        status: {
          label: '状态',
          type: 'radio',
          items: [
            {value: 0, text: '禁用', tagType: 'danger'},
            {value: 1, text: '正常'}
          ]
        }
      }
    }
  },
  methods: {
    openChartDialogHandler(type, option) {
      this.charType = type

      this.$nextTick(() => {
        this.openChartDialog(option)
      })
    }
  },
  components: {
    AddOrUpdate,
    tableView,
    chartAll,
    chartOne
  }
}
</script>
